<!DOCTYPE html>
<%@page import="ihotel.Reserva" %>
<html>
	<head>
		<meta name="layout" content="main">
		<g:set var="entityName" value="${message(code: 'reserva.label', default: 'Reserva')}" />
		<title>iHotel HomePage</title>
		<style type="text/css" media="screen">
			#principal {
				margin: 2em 2em 1em;
				width: 12em;
				float: left;
			}
			
			#reserva {
				background-color: #eee;
				border: .2em solid #fff;
				margin: 2em 2em 1em;
				padding: 1em;
				width: 12em;
				float: left;
				-moz-box-shadow: 0px 0px 1.25em #ccc;
				-webkit-box-shadow: 0px 0px 1.25em #ccc;
				box-shadow: 0px 0px 1.25em #ccc;
				-moz-border-radius: 0.6em;
				-webkit-border-radius: 0.6em;
				border-radius: 0.6em;
			}
			
			.ie6 #reserva {
				display: inline; /* float double margin fix http://www.positioniseverything.net/explorer/doubled-margin.html */
			}

			#reserva ul {
				font-size: 0.9em;
				list-style-type: none;
				margin-bottom: 0.6em;
				padding: 0;
			}
            
			#reserva li {
				line-height: 1.3;
			}

			#reserva h1 {
				text-transform: uppercase;
				font-size: 1.1em;
				margin: 0 0 0.3em;
			}

			#page-body {
				margin: 1em 1em 1.25em 1.25em;
			}

			h2 {
				margin-top: 1em;
				margin-bottom: 0.3em;
				font-size: 1em;
			}

			p {
				line-height: 1.5;
				margin: 0.25em 0;
			}

			@media screen and (max-width: 480px) {
				#status {
					display: none;
				}

				#page-body {
					margin: 0 1em 1em;
				}

				#page-body h1 {
					margin-top: 0;
				}
			}

	        .style3 {
	            width: 350px;
	        }
	        
		</style>
	</head>
	<body>
		<div id="principal" style="width:94%;">
	        <p>Bem vindo a página do nosso hotel. Veja a seguir fotos e demais informações de como podemos serví-lo.</p>
            <hr/>
	        <table style="width: 100%; background-color: #e1f2b6; border-top:none; margin-bottom: 0em;">
	            <tr>
	                <td class="style3"><img src="${createLinkTo(dir: 'images', file: 'foto1.png')}" /></td>
	                <td class="style3"><img src="${createLinkTo(dir: 'images', file: 'foto2.png')}" /></td>
	                <td class="style3"><img src="${createLinkTo(dir: 'images', file: 'foto3.png')}" /></td>
	                <td class="style3"><a class="login" href="${createLink(uri: '/')}"><g:message code="Area interna"/></a></td>						
	            </tr>
	        </table>	        
            <hr/>
		</div>
        <div id="reserva" style="width:90%">	        
	        <h1>Reservas online</h1>
            <hr/>
			<g:form action="verificarDisponibilidade">     	        	        
	        <table style="width:100%; border-top:none; margin-bottom: 0em;">
	            <tr>
	                <td style="padding:0.5em 0.1em;">Data Inicial</td>
	                <td style="padding:0.5em 0.1em;">Data Final</td>
	                <td style="padding:0.5em 0.1em;">Quartos</td>
	                <td style="padding:0.5em 0.1em;">Adultos</td>
	                <td style="padding:0.5em 0.1em;">Crianças</td>
	                <td style="padding:0.5em 0.1em;">&nbsp;</td>
	            </tr>	             
	            <tr>
	                <td style="padding:0.5em 0.1em;"><g:datePicker name="dataInicial" precision="day"  value="${reservaInstance?.dataInicial}"/></td>	                		                	
	                <td style="padding:0.5em 0.1em;"><g:datePicker name="dataFinal"   precision="day"  value="${reservaInstance?.dataFinal}"/></td>
					<td style="padding:0.5em 0.1em;"><g:field name="quantidadeQuartos"  type="number" min="1" max="5" value="1" required=""/></td>
					<td style="padding:0.5em 0.1em;"><g:field name="quantidadeAdultos"  type="number" min="1" max="5" value="1" required=""/></td>
					<td style="padding:0.5em 0.1em;"><g:field name="quantidadeCriancas" type="number" min="0" max="3" value="0" required=""/></td>                  
	                <td style="width: 80px; padding:0.5em 0.1em;"><g:submitButton name="verificarDisponibilidade" class="verificarDisponibilidade" value="Ver. Disponibilidade" /></td>	                	                 	                	                	                		                	
	            </tr>
	        </table>
	        </g:form>
	        <hr/>
		</div>
	</body>
</html>
